<template>
  <div class="second_wrap" :style="{height: clientH + 'px'}">
    <div class="r_t_time">{{timeString}}</div>
    <div class="video_box">
      <!-- 视频直播 -->
      <iframe src="http://cloud.quklive.com/cloud/a/embed/1510211394982751" width="100%" height="100%" allowfullscreen ></iframe>
    </div>
    <div class="lab_param_wrap">
      <div class="param_title">Signal Generator</div>
      <div class="demo-input-suffix">
        Amplitude ( deg )：
        <el-input
          v-model="pageParams.input1">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        Frequency ( Hz )：
        <el-input
          v-model="pageParams.input2">
        </el-input>
      </div>
      <div class="demo-input-suffix">
        Offset( deg ) ：
        <el-input
          v-model="pageParams.input3">
        </el-input>
      </div>
      <div class="confirm_btn" @click="confirm"></div>
    </div>
    <div class="end_btn" @click="endLab">结束</div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
var querystring = require('querystring');
axios.interceptors.request.use(function(config){
  config.headers["Content-Type"] = 'application/x-www-form-urlencoded';
  return config;
});
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      pageParams: {
        input1: '20',
        input2: '1',
        input3: '0'
      },
      count: 29,
      timeString: '00:29',
      timer: null,
      video_url: null,
      res: {
          "Error": {
            "status": false,
            "code": 0,
            "source": ""
          },
          "Waveform Out": [
              {
                "Waveform Name": "Input Voltage",
                "Waveform Value": {
                  "Y": [
                    0,
                    0,
                    1453,
                    1453,
                    1453,
                    1453,
                    1452,
                    1450,
                    1447,
                    1444,
                    1438,
                    1432,
                    1425,
                    1416,
                    1408,
                    1399,
                    1389,
                    1382,
                    1373,
                    1367,
                    1362,
                    1358,
                    1356,
                    1356,
                    1356,
                    -1359,
                    -1365,
                    -1375,
                    -1389,
                    -1403,
                    -1419,
                    -1431,
                    -1438,
                    -1437,
                    -1427,
                    -1408,
                    -1379,
                    -1342,
                    -1298,
                    -1254,
                    -1212,
                    -1167,
                    -1131,
                    -1097,
                    -1069,
                    -1047,
                    -1035,
                    -1031,
                    -1031,
                    1042,
                    1063,
                    1090,
                    1127,
                    1169,
                    1219,
                    1272,
                    1321,
                    1367,
                    1399,
                    1414,
                    1402,
                    1374,
                    1323,
                    1267,
                    1201,
                    1138,
                    1059,
                    967,
                    875,
                    842,
                    812,
                    790,
                    777,
                    775,
                    788,
                    -806,
                    -839,
                    -882,
                    -936,
                    -997,
                    -1067,
                    -1141,
                    -1214,
                    -1287,
                    -1345,
                    -1382,
                    -1391,
                    -1339,
                    -1314,
                    -1233,
                    -1135,
                    -1046,
                    -942,
                    -847,
                    -753,
                    -670,
                    -594,
                    -536,
                    -479,
                    -446
                  ],
                  "dt": 1,
                  "t0": "上午 8:00:00.000 1904/1/1 星期五"
                }
              },
              {
                "Waveform Name": "Arm Angle",
                "Waveform Value": {
                  "Y": [
                    0,
                    0,
                    0,
                    176,
                    527,
                    1406,
                    2285,
                    3516,
                    4922,
                    6680,
                    8613,
                    10547,
                    12656,
                    14941,
                    17402,
                    19688,
                    22149,
                    24609,
                    27070,
                    29707,
                    32168,
                    34629,
                    37266,
                    39727,
                    42363,
                    45000,
                    47461,
                    49571,
                    51153,
                    52383,
                    53086,
                    53262,
                    52910,
                    52031,
                    50801,
                    49395,
                    47813,
                    46231,
                    44824,
                    43418,
                    42012,
                    40957,
                    39902,
                    38848,
                    37969,
                    37090,
                    36211,
                    35332,
                    34629,
                    33750,
                    33047,
                    32695,
                    32344,
                    32520,
                    32871,
                    33926,
                    35332,
                    37442,
                    40078,
                    43242,
                    47110,
                    50801,
                    54317,
                    57305,
                    59942,
                    62227,
                    63985,
                    66094,
                    67852,
                    68907,
                    69610,
                    70489,
                    71016,
                    71719,
                    72422,
                    72774,
                    73125,
                    73477,
                    73477,
                    73125,
                    72422,
                    71192,
                    69434,
                    66973,
                    63809,
                    59414,
                    54492,
                    48867,
                    43418,
                    38672,
                    34453,
                    30938,
                    27949,
                    25664,
                    23379,
                    21445,
                    19688,
                    18106,
                    16524,
                    15117
                  ],
                  "dt": 1,
                  "t0": "上午 8:00:26.830 1904/1/1 星期五"
                }
              },
              {
                "Waveform Name": "Pendulum Angle",
                "Waveform Value": {
                  "Y": [
                    0,
                    0,
                    -176,
                    -352,
                    -703,
                    -1582,
                    -2637,
                    -3867,
                    -5449,
                    -7031,
                    -8965,
                    -10723,
                    -12481,
                    -14414,
                    -16172,
                    -17754,
                    -19336,
                    -20566,
                    -21797,
                    -22676,
                    -23379,
                    -23906,
                    -24258,
                    -24258,
                    -24258,
                    -23906,
                    -23027,
                    -21621,
                    -19512,
                    -16875,
                    -13184,
                    -9316,
                    -4395,
                    1055,
                    6680,
                    12305,
                    17930,
                    23379,
                    28652,
                    33399,
                    37442,
                    41309,
                    44297,
                    46934,
                    49043,
                    50625,
                    51504,
                    51856,
                    51856,
                    51153,
                    49746,
                    47813,
                    45000,
                    41660,
                    37266,
                    31992,
                    26367,
                    19160,
                    11777,
                    3867,
                    -5273,
                    -13711,
                    -22149,
                    -29531,
                    -36387,
                    -42188,
                    -48164,
                    -54317,
                    -60117,
                    -62754,
                    -64864,
                    -66270,
                    -67149,
                    -67324,
                    -66621,
                    -65567,
                    -63633,
                    -60996,
                    -57656,
                    -53613,
                    -48692,
                    -42891,
                    -36563,
                    -28652,
                    -20391,
                    -10195,
                    0,
                    12832,
                    21094,
                    30762,
                    39902,
                    47461,
                    54844,
                    61172,
                    66973,
                    71895,
                    76289,
                    79629,
                    82793,
                    84727
                  ],
                  "dt": 1,
                  "t0": "上午 8:00:26.830 1904/1/1 星期五"
                }
              }
            ]
          }
    }
  },
  created () {
    console.log(querystring)
    // 启动设备
    const startParams = {
      sample_rate: 100
    };
    this.deviceStart(querystring.stringify(startParams));
    // 开始倒计时
    this.countDownFun();
  },
  computed: {
    clientH: function () {
      return document.documentElement.clientHeight;
    }
  },
  methods: {
    // 确定按钮
    confirm: function () {
      // 点击确定发送refresh请求
      // 请求参数
      const refreshParams = {
        amplitude:this.pageParams.input1,
        frequency:this.pageParams.input2,
        offset:this.pageParams.input3
      };
      this.deviceRefresh(querystring.stringify(refreshParams));
    },
    // 倒计时方法
    countDownFun () {
      // 到计时逻辑
      let self = this;
      this.timer = setInterval(()=>{
        self.count = self.count - 1;
        if (self.count < 10) {
          self.timeString = '00 : 0' + self.count;
        }else{
          self.timeString = '00 : ' + self.count;
        }
        console.log(self.count)
        if(self.count == 0){
          clearInterval(self.timer);
          // 倒计时结束弹窗
          // this.open6();
          // 倒计时结束停掉设备并获取实验数据
          this.deviceStop();
          setTimeout(()=>{
              self.getData();
          },300)
        }
      },1000);
    },
    // 倒计时结束弹窗方法
    open6 () {
        this.$confirm('本次实验已结束', '提示', {
          confirmButtonText: '结束',
          cancelButtonText: '再来一次',
          closeOnClickModal: false,
          type: 'warning',
          center: true
        }).then(() => {
          // 通过路由传递参数
          this.$router.push({
                            path: '/thirdPage',
                            name: 'third',
                            query: {
                                routeParams: this.res
                            }
                          })
        }).catch(() => {
              this.count = 29;
              this.timeString = '00:29';
              // 点击再来一次重新启动设备并开始倒计时
              const startParams = {
                sample_rate: 100
              };
              this.deviceStart(querystring.stringify(startParams));
              this.countDownFun();
              });
            },
    // 设备start方法
    deviceStart (startParams){
      console.log(startParams)
      axios({
        method: 'post',
        url: 'http://192.168.106.67:80011/apis/start/',
        data: startParams
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    // 设备start方法
    deviceRefresh (startParams){
      axios({
        method: 'post',
        url: 'http://192.168.106.67:80011/apis/refresh/',
        data: startParams
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    // 设备stop方法
    deviceStop (startParams){
      axios({
        method: 'get',
        url: 'http://192.168.106.67:80011/apis/stop/'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    // 实验结束获取数据
    getData (){
      let self = this;
      axios({
        method: 'get',
        url: 'http://192.168.106.67:80011/apis/status/'
      })
      .then(function (response) {
        self.res = response;
        //返回数据再弹窗
        if(response){
          self.open6();
        }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    getDataEnd (){
      let self = this;
      axios({
        method: 'get',
        url: 'http://192.168.106.67:80011/apis/status/'
      })
      .then(function (response) {
        self.res = response;
        //返回数据再弹窗
        if(response){
              // 通过路由传递参数
              self.$router.push({
                                path: '/thirdPage',
                                name: 'third',
                                query: {
                                    routeParams: self.res
                                }
                              })
        }
      })
      .catch(function (error) {
        // 测试绘图
              self.$router.push({
                                path: '/thirdPage',
                                name: 'third',
                                query: {
                                    routeParams: self.res
                                }
                              })
        console.log(error);
      });
    },
    // 结束按钮
    endLab () {
      let self = this;
      // 清掉定时器
      clearInterval(self.timer);
      //停掉设备并获取实验数据
      this.deviceStop();
      setTimeout(()=>{
              self.getDataEnd();
          },300)
      // this.$goRoute('/thirdPage');
    }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .el-message-box__headerbtn{
    display: none;
  }
  .second_wrap{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(//storage.xuetangx.com/public_assets/xuetangx/images/second_bg2.png)right top no-repeat;
    background-size: 95% 80%;
    // 倒计时
    .r_t_time{
      position: absolute;
      top: 3.8%;
      right: 10%;
      color: #2C3033;
      font-size: 24px;
      font-weight: bold;
    }
    // 结束按钮
    .end_btn{
      position: fixed;
      cursor: pointer;
      margin-left: -90px;
      bottom: 50px;
      left: 50%;
      width: 180px;
      height: 50px;
      line-height: 50px;
      border-radius: 25px;
      text-align: center;
      font-size: 23px;
      background: linear-gradient(to right, #95F7E0 , #DAB9FF);
      color: #ffffff;
    }
    // 视频区域
    .video_box{
      position: absolute;
      top: 25%;
      left: 11.4%;
      width: 41.5%;
      height: 50.5%;
      background: #ffffff;
      video{
        width: 100%;
        height: 100%;
      }
    }
    // 参数区域
    .lab_param_wrap{
      position: absolute;
      right: 10%;
      top: 30%;
      width: 30%;
      height: 40%;
      .el-input{
        width: 50%;
        float: right;
      }
      .param_title{
        margin-bottom: 45px;
        text-align: left;
      }
      .demo-input-suffix{
        height: 40px;
        line-height: 40px;
        margin-bottom: 10px;
        text-align: left;
      }
      .confirm_btn{
        cursor: pointer;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 40%;
        height: 50px;
        background: url(//storage.xuetangx.com/public_assets/xuetangx/images/confirm_btn.png) no-repeat;
        background-size: contain;
      }
    }
  }
</style>
